<template>
	<div class="img-verify">
		<canvas ref="verify" :width="state.width" :height="state.height" @click="handleDraw"></canvas>
	</div>
</template>
<script setup>
	import {
		onMounted
	} from 'vue'
	const emit = defineEmits(['changeCode']);
	const state = reactive({
		pool: '1234567890', // 字符串
		width: 100 * 3.5,
		height: 46 * 3.5,
		imgCode: ''
	})
	const verify = ref('verify');
	onMounted(() => {
		/**
		 *初始化绘制图片验证码
		 */
		state.imgCode = draw();
		emit("changeCode", state.imgCode);
	})

	const handleDraw = () => {
		state.imgCode = draw();
		emit("changeCode", state.imgCode);
	}

	const randomNum = (min, max) => {
		return parseInt(Math.random() * (max - min) + min)
	}
	/**
	 * 随机颜色
	 */
	const randomColor = (min, max) => {
		const r = randomNum(min, max)
		const g = randomNum(min, max)
		const b = randomNum(min, max)
		return `rgb(${r},${g},${b})`
	}
	/**
	 * 绘制图片
	 */
	const draw = () => {

		// 3.填充背景颜色，背景颜色要浅一点
		const ctx = verify.value.getContext('2d')
		// 填充颜色
		ctx.fillStyle = randomColor(180, 230)
		// 填充的位置
		ctx.fillRect(0, 0, state.width, state.height)
		// 定义paramText
		let imgCode = '';
		var num1 = 0;
		var num2 = 0;
		var bool = randomNum(0, 10);
		bool = bool < 5 ? false : true;
		var minNum=1;
		var maxNum=20;
		
		// 4.随机产生字符串，并且随机旋转
		for (let i = 0; i < 4; i++) {
			// 随机的四个字
			var text = "";
			if (i == 0) {
				num1 = randomNum(minNum,maxNum)
				text += num1;
			}
			if (i == 1) {
				text += bool ? '+' : '-';
			}
			if (i == 2) {
				if (bool) {
					num2 = randomNum(minNum,maxNum)
				} else {
					num2 = randomNum(minNum,num1)
				}
				text += num2;
			}
			if (i == 3) {
				text += '=?';
			}

			// 随机的字体大小
			const fontSize = 20 * 3.5;
			// 字体随机的旋转角度
			const deg = i == 1 ? randomNum(-10, 10) : randomNum(-20, 20)
			/*
			 * 绘制文字并让四个文字在不同的位置显示的思路 :
			 * 1、定义字体
			 * 2、定义对齐方式
			 * 3、填充不同的颜色
			 * 4、保存当前的状态（以防止以上的状态受影响）
			 * 5、平移translate()
			 * 6、旋转 rotate()
			 * 7、填充文字
			 * 8、restore出栈
			 * */
			ctx.font = fontSize + 'px Simhei'
			ctx.textBaseline = 'top'
			ctx.fillStyle = randomColor(80, 150)

			ctx.save()
			ctx.translate(20 * i * 4 + 10 * 3, 15 * 3)
			ctx.rotate((deg * Math.PI) / 180)
			// fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。
			// 请使用 font 属性来定义字体和字号，并使用 fillStyle 属性以另一种颜色/渐变来渲染文本。
			// context.fillText(text,x,y,maxWidth);
			ctx.fillText(text, -10 + 5, 0)
			ctx.restore()
		}
		/*
		 * 随机产生5条干扰线,干扰线的颜色要浅一点
		 */
		for (let i = 0; i < 5; i++) {
			ctx.beginPath()
			ctx.moveTo(randomNum(0, state.width), randomNum(0, state.height))
			ctx.lineTo(randomNum(0, state.width), randomNum(0, state.height))
			ctx.strokeStyle = randomColor(180, 230)
			ctx.closePath()
			ctx.stroke()
		}
		/*
		 * 随机产生40个干扰的小点
		 */
		for (let i = 0; i < 30; i++) {
			ctx.beginPath()
			ctx.arc(randomNum(0, state.width), randomNum(0, state.height), 1, 0, 2 * Math.PI)
			ctx.closePath()
			ctx.fillStyle = randomColor(150, 200)
			ctx.fill()
		}
		var res=Number(num1);
		if(bool){
			res+=Number(num2)
		}else{
			res-=Number(num2)
		}
		return res.toFixed(0);
	}

	// const draw = () => {

	//   // 3.填充背景颜色，背景颜色要浅一点
	//   const ctx = verify.value.getContext('2d')
	//   // 填充颜色
	//   ctx.fillStyle = randomColor(180, 230)
	//   // 填充的位置
	//   ctx.fillRect(0, 0, state.width, state.height)
	//   // 定义paramText
	//   let imgCode = '';
	//   // 4.随机产生字符串，并且随机旋转
	//   for (let i = 0; i < 4; i++) {
	//     // 随机的四个字
	//     const text = state.pool[randomNum(0, state.pool.length)]
	//     imgCode += text
	//     // 随机的字体大小
	//     const fontSize = randomNum(18 * 3.5, 40 * 3.5)
	//     // 字体随机的旋转角度
	//     const deg = randomNum(-30, 30)
	//     /*
	//      * 绘制文字并让四个文字在不同的位置显示的思路 :
	//      * 1、定义字体
	//      * 2、定义对齐方式
	//      * 3、填充不同的颜色
	//      * 4、保存当前的状态（以防止以上的状态受影响）
	//      * 5、平移translate()
	//      * 6、旋转 rotate()
	//      * 7、填充文字
	//      * 8、restore出栈
	//      * */
	//     ctx.font = fontSize + 'px Simhei'
	//     ctx.textBaseline = 'top'
	//     ctx.fillStyle = randomColor(80, 150)

	//     ctx.save()
	//     ctx.translate(20 * i * 3 + 10 * 3, 15 * 3)
	//     ctx.rotate((deg * Math.PI) / 180)
	//     // fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。
	//     // 请使用 font 属性来定义字体和字号，并使用 fillStyle 属性以另一种颜色/渐变来渲染文本。
	//     // context.fillText(text,x,y,maxWidth);
	//     ctx.fillText(text, -10 + 5, -10)
	//     ctx.restore()
	//   }
	//   /*
	//    * 随机产生5条干扰线,干扰线的颜色要浅一点
	//    */
	//   for (let i = 0; i < 5; i++) {
	//     ctx.beginPath()
	//     ctx.moveTo(randomNum(0, state.width), randomNum(0, state.height))
	//     ctx.lineTo(randomNum(0, state.width), randomNum(0, state.height))
	//     ctx.strokeStyle = randomColor(180, 230)
	//     ctx.closePath()
	//     ctx.stroke()
	//   }
	//   /*
	//    * 随机产生40个干扰的小点
	//    */
	//   for (let i = 0; i < 30; i++) {
	//     ctx.beginPath()
	//     ctx.arc(randomNum(0, state.width), randomNum(0, state.height), 1, 0, 2 * Math.PI)
	//     ctx.closePath()
	//     ctx.fillStyle = randomColor(150, 200)
	//     ctx.fill()
	//   }
	//   return imgCode;
	// }
</script>
<style type="text/css">
	.img-verify canvas {
		cursor: pointer;
		width: 100px;
		height: 46px;
	}

	.img-verify {
		width: 100px;
		height: 46px;
		position: relative;
		overflow: hidden;
	}
</style>
